<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.authentication')">
      <el-form ref="form" label-position="top" :model="editForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.username')"
              prop="username"
              required
            >
              <ko-data-item
                v-model="editForm.username"
                class="w-full"
                itemType="input"
                @change="syncToModel"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.password')"
              prop="password"
            >
              <ko-data-item
                v-model="editForm.password"
                class="w-full"
                itemType="password"
                @change="syncToModel"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import { decodeFromBase64, encodeToBase64 } from "@/utils/text";
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { onMounted, ref } from "vue";

type Prop = {
  authenticationObj: any;
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:authenticationObj"]);

const editForm = ref({
  username: "",
  password: ""
});

const syncToModel = () => {
  emit("update:authenticationObj", {
    username: encodeToBase64(editForm.value.username),
    password: encodeToBase64(editForm.value.password)
  });
};

onMounted(() => {
  if (props.authenticationObj?.username) {
    editForm.value.username = decodeFromBase64(
      props.authenticationObj.username
    );
  }

  if (props.authenticationObj?.password) {
    editForm.value.password = decodeFromBase64(
      props.authenticationObj.password
    );
  }
});
</script>

<style scoped></style>
